<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="http://unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="http://unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="http://unpkg.com/element-plus"></script>
    <!-- <link href="./css/index.css" rel="stylesheet"> -->
    <link href="./css/3.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <el-card class="card" v-for="stu in stus">
            <template #header>
                <div class="card-header">
                    <span><el-avatar :size="50" :src="stu.avatar"></span>
                    <span class="name">{{stu.name}}</stu></span>
                </div>
            </template>
            <div>
                <p>年龄：{{stu.age}}</p>
                <p>性别：{{stu.sex}}</p>
                <p>总分：{{stu.score[0]+stu.score[1]+stu.score[2]}}</p>
            </div>
            <el-tooltip placement="buttom" v-if="stu.score[0]>=60&&stu.score[1]>=60&&stu.score[2]>=60">
                <template #content>
                    <p>语文：{{stu.score[0]}}</p>
                    <p>数学：{{stu.score[1]}}</p>
                    <p>英语：{{stu.score[2]}}</p>
                </template>
                <el-button>查看成绩单</el-button>
            </el-tooltip>
        </el-card>
            <el-affix position="button" :offset="20" @click="drawer = true">
              <el-button type="primary" style="margin-left: 16px">新增</el-button>
            </el-affix>
            <el-drawer v-model="drawer" title="新增学生成绩" :direction="direction" >
                <div class="form">
                    <el-form :model="form" label-width="auto" style="max-width: 600px">
                        <el-form-item label="账号">
                            <el-input v-model="form.account" />
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="form.password" />
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="form.name" />
                        </el-form-item>
                        <el-form-item label="所在地区">
                            <el-select v-model="form.region" placeholder="请选择你所在的地区">
                                <el-option label="上海" value="shanghai" />
                                <el-option label="北京" value="beijing" />
                                <el-option label="杭州" value="hangzhou" />
                                <el-option label="金华" value="jinhua" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-radio-group v-model="form.sex">
                                <el-radio value="0">保密</el-radio>
                                <el-radio value="1">男</el-radio>
                                <el-radio value="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="兴趣爱好">
                            <el-checkbox-group v-model="form.hobby">
                                <el-checkbox value="音乐" name="type">
                                    音乐
                                </el-checkbox>
                                <el-checkbox value="影视" name="type">
                                    影视
                                </el-checkbox>
                                <el-checkbox value="运动" name="type">
                                    运动
                                </el-checkbox>
                                <el-checkbox value="其他" name="type">
                                    其他
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>

                        <el-form-item label="签名档">
                            <el-input v-model="form.desc" type="textarea" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
            </el-drawer>
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                stus:
                    [
                        { id: "", name: "张三", age: 20, sex: "男", score: [80, 80, 80],  avatar: "./img/avatar"+Math.floor(Math.random()*10)+".png" },
                        { id: "", name: "李四", age: 20, sex: "男", score: [70, 90, 100],  avatar: "./img/avatar"+Math.floor(Math.random()*10)+".png" },
                        { id: "", name: "王五", age: 20, sex: "男", score: [90, 80, 60],  avatar: "./img/avatar"+Math.floor(Math.random()*10)+".png" },
                    ],
                    report:{},
                    drawer:false,
                    form:{id:"",name:"",age:0,sex:"",score:[0,0,0],avatar:"./img/avatar"+Math.floor(Math.random()*10)+".png"},
            }
        },
        methods: {
            onSubmit(){
                this.stus.push(this.form);
                this.drawer=false;
                this.form={id:"",name:"",age:0,sex:"",score:[0,0,0],avatar:"./img/avatar"+Math.floor(Math.random()*10)+".png"}
            }
        }
    }
    Vue.createApp(App).use(ElementPlus).mount('#app')
</script>

</html>